import { useState, useEffect } from "react";
import { Switch, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import CommonTable from "@/components/CommonTable";
import { getVoiceConfigList, saveOrUpdateVoiceConfig } from "../service";

const VoiceSettingsModal = props => {
	const { onCancel } = props;
	const [voiceList, setVoiceList] = useState([]);

	const columns = [
		{
			title: "语音提示",
			dataIndex: "promptText",
			key: "promptText",
			width: 200
			// render: (text, record) => <span className="table-weight-text">{typeMap && typeMap[text]}</span>
		},
		{
			title: "是否开启",
			dataIndex: "configStatus",
			key: "configStatus",
			render: (value, record, index) => {
				return (
					<>
						<Switch
							checked={value == "close" ? false : true}
							size="default"
							onChange={() => statusChange(index, value === "close" ? "open" : "close")}
						/>
					</>
				);
			}
		},
		{
			title: "触发条件",
			width: 260,
			dataIndex: "configCondition",
			key: "configCondition"
		}
	];

	// 启用/禁用
	const statusChange = async (index, status) => {
		const params = [...voiceList];
		params[index].configStatus = status;
		setVoiceList([...params]);
	};
	async function getVoiceList() {
		const { success, data } = await getVoiceConfigList();
		if (success) {
			setVoiceList(data || []);
		}
	}

	async function handleOk() {
		const { success, data } = await saveOrUpdateVoiceConfig(voiceList);
		if (success) {
			message.success("操作成功");
			getVoiceList();
			onCancel();
		}
	}

	useEffect(() => {
		getVoiceList();
	}, []);

	const CommonTableProps = {
		data: voiceList,
		columns,
		size: "small",
		rowkey: "id",
		scroll: { y: '45vh' }
	};

	return (
		<CommonModal title={{ title: "语音播报设置" }} open={true} width="630px" onOk={handleOk} onCancel={onCancel}>
			<CommonTable bordered {...CommonTableProps} />
		</CommonModal>
	);
};
export default VoiceSettingsModal;
